<template>
  <div class="mvlist">
    <h2>最新MV</h2>
    <div class="titleText">
      <span
        v-for="(item, index) in titleList"
        :key="index"
        @click="queryList(item.area, index)"
        :class="titleListIndex == index ? 'active' : ''"
        >{{ item.name }}</span
      >
    </div>

    <div class="mv-list">
      <div
        class="mvContent"
        v-for="(item, index) in mvList"
        :key="index"
        @click="goSearch(item.id)"
      >
        <div class="img-content">
          <img :src="item.cover + '?param=188y120'" />
        </div>
        <div class="mvTxet">
          <span>{{ item.name }}</span>
          <span>{{ item.artistName }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { newMv } from "@/api/api";
export default {
  name: "mvlist",
  data() {
    return {
      titleList: [
        { area: "", name: "全部" },
        { area: "内地", name: "内地" },
        { area: "港台", name: "港台" },
        { area: "欧美", name: "欧美" },
        { area: "日本", name: "日本" },
        { area: "韩国", name: "韩国" },
      ],
      titleListIndex: 0,
      mvList: [],
      mvParams: { area: "", limit: 10 },
    };
  },
  mounted() {
    this.getMvList(this.mvParams);
  },
  methods: {
    queryList(area, index) {
      this.titleListIndex = index;
      this.mvParams.area = area;
      this.getMvList(this.mvParams);
    },
    getMvList(Params) {
      newMv(Params).then((res) => {
        this.mvList = res.data.data;
      });
    },
    goSearch(id) {},
  },
};
</script>

<style lang="less" scoped>
.mvlist {
  margin: 20px auto;
  width: 1200px;
  height: auto;
  h2 {
    font-family: "hmB";
    font-size: 28px;
    color: rgb(68, 68, 68);
    text-align: center;
    margin-bottom: 20px;
  }
  .titleText {
    display: flex;
    width: 300px;
    justify-content: space-between;
    margin: 0 auto 20px auto;
    span {
      display: inline-block;
      text-align: center;
      font-family: "hmR";
      font-size: 16px;
      color: #6b6b6b;
      cursor: pointer;
    }
    .active {
      border-bottom: 3px solid rgb(61, 116, 240);
    }
  }

  .mv-list {
    width: 1200px;
    height: 400px;
    display: flex;
    justify-content: space-between;
    align-content: space-between;
    flex-wrap: wrap;
    .mvContent {
      border-radius: 5px;
      width: 228px;
      .img-content {
        img {
          width: 228px;
          height: 140px;
          transition: all 0.2s linear;
          border-radius: 5px;
          overflow: hidden;
        }
        img:hover {
            transform: scale(1.05, 1.05);
            transition: all 0.2s linear;
            cursor: pointer;
          }
      }

      .mvTxet {
        width: 188px;
        height: 30px;
        margin-top: 5px;
        cursor: pointer;
        word-break: break-all;
        word-wrap: break-word;
        overflow: hidden;
        line-height: 15px;
        text-overflow: ellipsis;
        display: -webkit-box;
        /*重新定义-webkit私有盒模型*/
        -webkit-box-orient: vertical;
        /*内容之间的排列顺序，vertical垂直方向排列*/
        -webkit-line-clamp: 2;
        /*在第几行末尾显示省略号...*/
        word-break: break-all;
        span {
          display: inline-block;
          font-family: "hmR";
          color: #6b6b6b;
          margin-right: 20px;
        }
      }
    }
  }
}
</style>